<template>
	<view class="page">
		<view class="title">关联机构列表</view>
		<view v-if="orgList.length > 0">
			<view class="org-card flex-box" v-for="(item, index) in orgList" :key="index" @click="goDetail(item)">
				<image :src="item.xilufitness_urls.shop_logo_image" class="logo" mode="aspectFill" />
				<view class="org-box">
					<view class="org-name">{{ item.shop_name }}</view>
					<view class="org-info" v-if="item.shop_contacts">联系人：{{ item.shop_contacts }}</view>
					<view class="org-info" v-if="item.shop_mobile">电话：{{ item.shop_mobile }}</view>
					<view class="org-info" v-if="item.address">地址：{{ item.address }}</view>
				</view>

			</view>
		</view>
		<view v-else class="empty">暂无关联机构</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orgList: []
			};
		},
		onLoad() {
			this.getShopList();
		},
		methods: {
			getShopList() {
				this.$http({
					url: "/addons/xilufitness/coach/getShopList"
				}).then(res => {
					const list = res.data.list || [];
					this.orgList = list;
				}).catch(err => {
					console.error("获取机构列表失败", err);
				});
			},
			goDetail(item) {
				// uni.showToast({
				// 	title: `点击了：${item.shop_name}`,
				// 	icon: 'none'
				// });
				// 这里可以跳转详情页，传参如：uni.navigateTo({ url: `/pages/detail?id=${item.id}` });
			}
		}
	};
</script>

<style scoped>
	.org-box {
		margin-top: -15rpx;
		margin-left: 20rpx;
		width: calc(100% - 150rpx)
	}

	.page {
		padding: 30rpx;
		background-color: #E8EEFE;
		min-height: 100vh;
		color: #333;
		box-sizing: border-box;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
	}

	.org-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 10rpx;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		border:1px solid #E8EEFE;
	}

	.org-card {
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
		padding:30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
		transition: 0.2s;
	}

	.org-info {
		font-size: 26rpx;
		color: #999;
		line-height: 40rpx;
	}

	.empty {
		text-align: center;
		padding: 200rpx 0;
		color: #666;
		font-size: 28rpx;
	}
</style>